<template>
  <div class="ZYF-cms">

    <div class="goback">
      <h3 class="h3">更多资源</h3>
      <a-icon class="back-icon" type="rollback"  @click="goBack"/>
    </div>
    <div class="video_box" id="operator" v-show="this.videoUrl">
      <video ref="videoPlayer" class="video-js" poster="@/assets/烟气视频.png">
        <source :src="videoUrl" type="video/mp4" />
      </video>
    </div>

    <a-form-model :model="form" :colon="false" layout="inline">
          <a-form-model-item label="上传用户">
            <a-input v-model="form.name" placeholder="请输入上传用户" allowClear />
          </a-form-model-item>
          <a-form-model-item label="内容分类">
            <a-select v-model="form.typeId" placeholder="请选择内容分类" style="width: 180px;" allowClear>
              <a-select-option :value="item.id" v-for="(item, index) in typeList" :key="index">{{ item.name }}</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="关键词">
            <a-input v-model="form.searchKey" placeholder="请输入关键字" allowClear/>
          </a-form-model-item>
          <a-form-model-item>
            <a-button type="primary" @click="getData">查询</a-button>
          </a-form-model-item>
    </a-form-model>
    <div class="video-list__box">
      <div class="article-title">
        <span class="border-text h3" v-if="whichInterface">最新视频</span>
        <span class="border-text h3" v-else>最新数据</span>
      </div>
      <ul class="article-father">
        <li class="acticle-child" v-for="(item, index) in newDataI" :key="index" @click="lookDetail(item)">
          <div class="img-box">
            <img :src="item.fileUrl" alt />
            <div class="resources-title">{{ item.title }}</div>
          </div>
          <div class="resources-bottom">
            <span><a-icon type="eye" />{{ item.views }}</span>
            <span>{{ item.nickname }} 发布于：{{ item.releaseTime }}</span>
          </div>
        </li>
      </ul>
    </div>
    <div class="page-box">
      <a-pagination :show-total="(total) => `共 ${total} 条记录`" v-model="form.currentPage" :total="total" :defaultPageSize="form.pageSize" :item-render="itemRender" @change="pagechangeFn"/>
    </div>
    <!-- //详情弹框 -->
    <a-modal v-model="detailPop" width="50%" :title="title" centered @cancel="delLisst" :maskClosable="false" :footer="null">
      <div>
        <a-form class="pollutionForm" :label-col="{ span: 10 }" :wrapper-col="{ span: 14 }">
          <a-row>
            <a-col :span="12" pull="1">
              <a-form-item label="上传人:">
                <span style="font-size: 18px">{{detail.nickname}}</span>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="通过时间">
                <span style="font-size: 18px">{{detail.releaseTime }}</span>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24" pull="6">
              <a-form-item label="描述">
                <span style="font-size: 18px">{{detail.content }}</span>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24" pull="6">
              <a-form-item label="文件信息"></a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="4"></a-col>
            <a-col :span="20">
              <div class="up-box">
                <div v-viewer>
                  <img v-for="(item, i) in imgsList" :key="i" :src="item.fileUrl" alt/>
                </div>
                <div>
                  <img v-for="(item, i) in videosList" :key="i" src="@/assets/烟气视频.png" @click="videoImg(item)" alt/>
                </div>
                <div>
                  <img v-for="(item, i) in filesList" :key="i" :src="item.fileUrl" alt/>
                </div>
              </div>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-modal>
  </div>
</template>

<script>
import moment from "moment";
import "moment/locale/zh-cn";
import videojs from "video.js";
import "video.js/dist/video-js.css";
import "viewerjs/dist/viewer.css";
import Viewer from "v-viewer";
import Vue from "vue";
Vue.use(Viewer);
export default {
  name: "more",
  data() {
    return {
      moment,
      typeList: [],
      form: {
        currentPage: 1,
        pageSize: 8,
        name: "",
        typeId: undefined,
        searchKey: "",
        isVideo: false,
      },
      total: 0,
      newDataI: [],
      detail: {},
      videoUrl: "",
      videosList: [],
      imgsList: [],
      filesList: [],
      detailPop: false,
      title: "",
      //判断加载哪个接口
      whichInterface: true,
    };
  },
  created() {
    this.whichInterface = this.$route.query.isVideo;
  },
  methods: {
    //打开视频
    videoImg(item) {
      this.videoUrl = item.fileUrl;
      // console.log(this.videoUrl);
      let options = {
        controls: true, // 是否显示底部控制栏
        preload: "auto", // 加载<video>标签后是否加载视频
        autoplay: "muted", // 静音播放
        playbackRates: [0.5, 1, 1.5, 2], // 倍速播放
        width: "640",
        height: "247",
        controlBar: {
          // 自定义按钮的位置
          children: [
            {name: "playToggle",},
            {name: "progressControl",},
            {name: "currentTimeDisplay",},
            {name: "timeDivider",},
            {name: "durationDisplay",},

            {
              name: "volumePanel", // 音量调整方式横线条变为竖线条
              inline: false,
            },
            {
              name: "pictureInPictureToggle", //画中画播放模式
            },
            {
              name: "fullscreenToggle",
            },
          ],
        },
      };
      this.player = videojs(
        this.$refs.videoPlayer,
        options,
        function onPlayerReady() {
          // console.log("onPlayerReady", this);
        }
      );
      // console.log(this.player);
      this.player.src({
        src: this.videoUrl,
      });
      var CloseButton = videojs.getComponent("CloseButton");
      CloseButton.prototype.handleClick = () => this.closeVideo();
      var closeButton = new CloseButton(this.player);
      this.player.addChild(closeButton);
      document.getElementById("operator").style.display = "block";
    },
    //关闭播放框
    closeVideo() {
      document.getElementById("operator").style.display = "none";
    },
    //查看详情
    lookDetail(item) {
      // console.log(item);
      this.detailPop = true;
      // console.log(item.id);
      this.$api.getDetail(item.id).then((res) => {
        this.detail = res.data.data;
        this.detail.technicalFileListPos.forEach((item) => {
          // console.log(item);
          if (item.fileType == "video") {
            this.videosList.push(item);
          }
          if (item.fileType == "img") {
            this.imgsList.push(item);
          }
          if (item.fileType == "file") {
            this.filesList.push(item);
          }
        });
        // console.log(this.imgsList);
        this.title = res.data.data.title;
        this.detail.releaseTime = moment(res.data.data.releaseTime).format(
          "YYYY/MM/DD "
        );
      });
    },
    //关闭详情
    delLisst() {
      if (this.whichInterface == false) {
        this.getNewDataI();
      } else {
        this.getNewDataV();
      }

      this.imgsList = [];
      this.filesList = [];
      this.videosList = [];
    },
    //返回方法
    goBack() {
      this.$router.back(-1);
    },
    //查询
    getData() {
      if (this.whichInterface == false) {
        this.getNewDataI();
      } else {
        this.getNewDataV();
      }
    },
    //查看分类
    getType() {
      this.$api.findType().then((res) => {
        console.log(res.data.data);
        this.typeList = res.data.data;
      });
    },
    //获取信息
    getNewDataI() {
      this.form.isVideo = false;
      this.$api.getMore(this.form).then((res) => {
        this.newDataI = res.data.data.records;
        this.total = res.data.data.total;
        this.newDataI.forEach((item) => {
          item.releaseTime = moment(res.data.data.records.releaseTime).format(
            "YYYY/MM/DD "
          );
          let type = item.fileUrl.substring(item.fileUrl.lastIndexOf(".") + 1);
          if (type == "PDF") {
            item.fileUrl = require("@/assets/pdf.png");
          } else if (type == "jpg") {
            item.fileUrl = require("@/assets/jpg.png");
          } else if (type == "doc") {
            item.fileUrl = require("@/assets/doc.png");
          } else if (type == "gif") {
            item.fileUrl = require("@/assets/gif.png");
          } else if (type == "mp4") {
            item.fileUrl = require("@/assets/mp4.png");
          } else if (type == "ppt") {
            item.fileUrl = require("@/assets/ppt.png");
          } else if (type == "rar") {
            item.fileUrl = require("@/assets/rar.png");
          } else if (type == "xls") {
            item.fileUrl = require("@/assets/xls.png");
          } else if (type == "png") {
            item.fileUrl = require("@/assets/png.png");
          } else {
            item.fileUrl = require("@/assets/xls.png");
          }
        });
      });
    },
    getNewDataV() {
      this.form.isVideo = true;
      this.$api.getMore(this.form).then((res) => {
        // console.log(res, "1");
        this.newDataI = res.data.data.records;
        this.total = res.data.data.total;
        this.newDataI.forEach((item) => {
          item.releaseTime = moment(res.data.data.records.releaseTime).format(
            "YYYY/MM/DD "
          );
          let type = item.fileUrl.substring(item.fileUrl.lastIndexOf(".") + 1);
          if (type == "PDF") {
            item.fileUrl = require("@/assets/pdf.png");
          } else if (type == "jpg") {
            item.fileUrl = require("@/assets/jpg.png");
          } else if (type == "doc") {
            item.fileUrl = require("@/assets/doc.png");
          } else if (type == "gif") {
            item.fileUrl = require("@/assets/gif.png");
          } else if (type == "mp4") {
            item.fileUrl = require("@/assets/mp4.png");
          } else if (type == "ppt") {
            item.fileUrl = require("@/assets/ppt.png");
          } else if (type == "rar") {
            item.fileUrl = require("@/assets/rar.png");
          } else if (type == "xls") {
            item.fileUrl = require("@/assets/xls.png");
          } else if (type == "png") {
            item.fileUrl = require("@/assets/png.png");
          } else {
            item.fileUrl = require("@/assets/xls.png");
          }
        });
      });
    },

    // 分页方法
    itemRender(current, type, originalElement) {
      if (type === "prev") {
        return <a>上一页</a>;
      } else if (type === "next") {
        return <a>下一页</a>;
      }
      return originalElement;
    },
    pagechangeFn(page, pageSize) {
      this.form.currentPage = page;
      if (this.whichInterface) {
        this.getNewDataV();
      } else {
        this.getNewDataI();
      }
    },
  },
  mounted() {
    // console.log("1");
    this.getType();
    if (this.whichInterface == false) {
      this.getNewDataI();
    } else {
      this.getNewDataV();
    }
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose();
    }
  },
};
</script>

<style lang='scss' scoped>
.video_box {
  position: absolute;
  z-index: 9999;
  height: 450px;
  left: 11%;
  top: 15%;
}
.video-js {
  height: 450px;
  width: 1000px;
}
.up-box {
  width: 80%;
  height: 100%;
  div {
    width: 100%;
    margin: 0 5px;
    display: flex;
    flex-wrap: wrap;
    img {
      margin: 5px 10px;
      width: 100px;
      height: 80px;
    }
  }
}

.goback {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .back-icon {
    font-size: 24px;
    cursor: pointer;
  }
}
.video-list__box{
  height: calc(100% - 16%);
}
.video-box__left {
  width: 70%;
  height: 100%;
}
.article-list__box {
  width: 100%;
  height: 70%;
}
.article-title {
  display: flex;
  justify-content: space-between;
}
.border-text {
  font-weight: 600;
  padding-left: 6px;
  border-left: 5px solid #9fb043;
}
.article-father {
  width: 100%;
  height: 90%;
  margin-top: 1%;
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}
.acticle-child {
  width: 24%;
  margin: 5px;
  height: 48%;
  cursor: pointer;
}
.img-box {
  width: 100%;
  height: 200px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.img-box img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
.resources-title {
  width: 100%;
  line-height: 30px;
  color: rgba(255, 255, 255, 0.8);
  padding: 0 10px;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.6);
  position: absolute;
  bottom: 0;
  left: 0;
}
.resources-bottom {
  //color: #000;
  font-size: 14px;
  padding: 4px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
}
.ZYF-cms {
  width: 100%;
  height: 100%;
  padding: 1%;
  box-sizing: border-box;
}
.a-col-class {
  margin-right: 18px;
}

/* 分页 */
.btn-class {
  float: left;
}
.btn-style {
  font-weight: 600;
  background: #954a45;
  border: 1px solid #954a45;
  letter-spacing: 5px;
  margin-right: 16px;
  height: auto;
}
.content-bottom {
  margin-top: 24px;
  width: 100%;
}
.page-box {
  float: right;
}
</style>
